<template>
    <div :class="`review-remark ${mode}`">
        <TechCell title="备注" :value="shopReviewRemark ? shopReviewRemark : '填写备注(选填)'" :isLink="true" @click="openRemark" />
        <!-- <div class="label-value title-color">备注</div>
        <div class="remark-container" @click="openRemark">
            <span class="remark-value">{{shopReviewRemark ? shopReviewRemark : '填写备注(选填)'}}</span>
            <MiniIcon name="right" :size="16" :mode="mode" :styleMode="styleMode" theme="#7D7D83" />
        </div> -->
        <TechDialog ref="remark" title="订单备注" extClass="shop-review-remark-dailog" @ok="resetRemark" :mode="mode" :theme="theme" :styleMode="styleMode" container="body">
            <div class="remark-content">
                <Field class="review-remark-field border-black-color" v-model="remark" type="textarea" placeholder="请填写备注" @blur="inputOnBlur" :autofocus="true" :maxlength="50" />
                <span class="review-remark-length">{{remarkLength}} / 50个字</span>
            </div>
        </TechDialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { TechCell } from '@components/base';
import { Field } from 'vant';
import { MiniIcon, TechDialog } from '@components/base';
import { inputBlurAction } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'ReviewRemark', // 备注
    mixins: [ModeMixin],
    components: {
        TechCell,
        Field,
        MiniIcon,
        TechDialog,
    },
    computed: {
        ...mapState({
            shopReviewRemark: state => state.shopReview.shopReviewRemark,
        }),
        remarkLength() {
            return this.remark.length || 0;
        },
    },
    data() {
        return {
            remark: '',
        };
    },
    methods: {
        ...mapActions([
            'changeShopReviewRemark',
        ]),
        inputOnBlur() {
            inputBlurAction();
        },
        openRemark() {
            this.remark = this.shopReviewRemark;
            this.$refs.remark.show();
        },
        resetRemark() {
            this.changeShopReviewRemark(this.remark);
        },
    },
};
</script>

<style lang="less">
.review-remark {
    height: 52px;
    .mode-white();
    .flex();
    justify-content: space-between;
    align-items: center;
    // .p-h(@shop-bag-gap);
    border-radius: @border-radius;
    .label-value {
        font-size: @font-size;
        color: @text-color;
    }
    .remark-container {
        font-size: @shop-font-size;
        color: @tip-color;
        opacity: .7;
        .flex-row-center();
        .remark-value {
            max-width: 180px;
            .text-overflow();
        }
    }
}
.shop-review-remark-dailog {
    .dialog-content {
        width: calc(100% - 2 * @shop-gap-md);
    }
    .remark-content {
        position: relative;
        // background-color: aquamarine;
        .review-remark-field {
            width: 100%;
            height: 98px;
            border: @border;
            border-radius: @border-radius;
        }
        .review-remark-length {
            position: absolute;
            bottom: @gap;
            right: @gap;
            color: @tip-color;
            opacity: .7;
            font-size: @shop-font-size-sm;
        }
    }
}
</style>
